// import Canvas from './canvas';
// import Customizer from './pages/Customizer';
// import Home from './pages/Home';

// function App() {
//   return (
//     <main className="app transition-all ease-in">
//       <Home />
//       <Canvas />
//       <Customizer />
//     </main>
//   )
// }

// export default App

import { useState, useEffect } from 'react';
import Canvas from './canvas';
import Customizer from './pages/Customizer';
import Home from './pages/Home';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  return (
    <div className={darkMode ? 'dark' : ''}>
      <main className="app transition-all ease-in">
        <Home darkMode={darkMode} setDarkMode={setDarkMode} />
        <Canvas />
        <Customizer darkMode={darkMode} setDarkMode={setDarkMode} />
      </main>
    </div>
  )
}

export default App